import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Button, DatePicker, Badge, Select, Descriptions } from 'antd';
import StandardTable from 'components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from '../DevLog/DevTask.less';

const { Option } = Select;
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const getValue = obj =>
    Object.keys(obj)
        .map(key => obj[key])
        .join(',');
// const statusMap = ['default', 'processing', 'success', 'error'];
const status = ['等待设置', '设置中', '设置成功', '设置失败', '设置超时'];
const statusMap = ['default', 'processing', 'success', 'error'];
const setType = [
    '已绑定',
    '未绑定',
];
const gridStyle = {
    width: '25%',
    textAlign: 'left',
  };

@connect(({ cutindetail, loading }) => ({
    cutindetail,
    loading: loading.models.playlist,
}))
@Form.create()
export default class CutInDetail extends PureComponent {
    state = {
        selectedRows: [],
        formValues: {},
    };

    componentDidMount() {
        const { dispatch } = this.props;
        const { icTaskId } = this.props.match.params;
        dispatch({
            type: 'cutindetail/fetch',
            payload:{icTaskId },
        });

    }


    render() {
        // //console.log('task', this.props.task);
        const { cutinfo:{progName,icPlayPeriod,city,icScope,icMod,createTime,taskStatus,remark,icProgMat} } = this.props.cutindetail;


        return (
            <PageHeaderLayout title="插播任务详情">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <Descriptions title="任务信息" bordered style={{ marginBottom: 20 }}>
                            <Descriptions.Item label="节目名称">{progName}</Descriptions.Item>
                            <Descriptions.Item label="插播周期">{icPlayPeriod}</Descriptions.Item>
                            <Descriptions.Item label="城市">{city}</Descriptions.Item>
                            <Descriptions.Item label="插播范围">{icScope}</Descriptions.Item>
                            <Descriptions.Item label="插播模式" >{icMod}</Descriptions.Item>
                            <Descriptions.Item label="创建时间" >{createTime}</Descriptions.Item>
                            <Descriptions.Item label="任务状态" >{taskStatus}</Descriptions.Item>
                            <Descriptions.Item label="备注" >{remark}</Descriptions.Item>

                            {/* <Descriptions.Item label="播放画面" span={3}>
                            {
                                Array.isArray(icProgMat)?icProgMat.map(item=><img src={item.matUrl} style={{ width: 400, height: 300 }}></img>) :null
                            }  
                            </Descriptions.Item> */}
                        </Descriptions>
                        <Card title="插播素材">
                            {
                                Array.isArray(icProgMat)?icProgMat.map(item=>
                                    
                                <Card.Grid style={gridStyle}>
                                    <img src={item.imeUrl} style={{width:'100%'}} ></img>
                                    <p>素材实例名称：{item.imeName}</p>
                                    <p>插播素材类型：{item.matType}</p>
                                    <p>插播时长：{item.icPlayTimeLen}秒</p>
                                </Card.Grid>
                                ):null
                            }  

                        </Card>
                    </div>
                </Card>
            </PageHeaderLayout>
        );
    }
}
